

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:xim/screen/main_screen.dart';
import 'package:xim/screen/message_list_screen/chat_list.dart';

const users = const {
  'dribbble@gmail.com': '12345',
  'hunter@gmail.com': 'hunter',
};

class LoginScreen extends StatefulWidget {

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  /// 手机号码输入框 背景颜色
  Color phoneTextFieldBgColor = const Color(0xfff3f4f6);

  /// 手机号码类型 字体颜色
  Color phoneTypeColor = const Color(0xff797f8e);

  /// 手机号码 字体颜色
  Color phoneNumberColor = const Color(0xff25344a);

  /// 分割符号颜色
  Color phoneNumberDividerColor =const Color(0xA7A8CCD2);

  /// 手机号码 字体大小
  double phoneNumberFontSize = 17;

  /// 手机号码 字体粗细
  var phoneNumberFontWeight = FontWeight.w600;

  var _phoneTextEditingController = TextEditingController();

  /// 手机号码
  String? phoneNumber = "";

  /// 登录表单 key
  GlobalKey _formKey = GlobalKey<FormState>();


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: true,
      child: Scaffold(
        body: Container(
          color: Colors.white,
          child: Stack(
            children: [
              const Positioned(
                top:20,
                right:20,
                child: Text("退出", style: TextStyle(fontSize: 14, color: Colors.grey)),
              ),
              SingleChildScrollView(
                child: Column(
                  children: [
                    SizedBox(
                      height: 0.3.sh,
                      child: const Center(
                        child: Text("Xim", style: TextStyle(fontSize: 32, fontWeight: FontWeight.w800),),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 24),
                      child: Form(
                        key: _formKey,
                        autovalidateMode: AutovalidateMode.onUserInteraction,
                        child: Column(
                          children: [
                            // phoneTextField,
                            accountTextField,
                            passwordTextField,
                            const SizedBox(height: 24,),
                            loginButton
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          )
        ),
      ),
    );
  }

   Widget get loginButton => Container(
     alignment: Alignment.center,
     decoration: const BoxDecoration(
       color: Colors.red,
       borderRadius: BorderRadius.all(Radius.circular(26))
     ),
     padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 16),
     child: InkWell(
       child: const Text("一键登录", style: TextStyle(color: Colors.white,fontSize: 16),),
       onTap: (){
         if ((_formKey.currentState as FormState).validate()) {
           // 验证通过提交数据
          Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context)=>const MainScreen()));
         }
       },
     ),
   );

  /// 手机号码输入框
  Widget get phoneTextField => Container(
    height: 70,
    decoration: BoxDecoration(
        color: phoneTextFieldBgColor,
        borderRadius: const BorderRadius.all(Radius.circular(12))
    ),
    padding: const EdgeInsets.symmetric(horizontal: 8),
    child: Row(
      children: <Widget>[
        Text("+86", style: TextStyle(fontSize: 18, color: phoneTypeColor,fontWeight: FontWeight.w700),),
        Icon(Icons.arrow_drop_down, color: phoneTypeColor,),
        SizedBox(
          height: 20,
          child: VerticalDivider(width: 4,thickness: 0.7, color: phoneNumberDividerColor,),
        ),
        const SizedBox(width: 8,),
        Expanded(
          child: TextField(
            controller: _phoneTextEditingController,
            maxLines: 1,
            onChanged: (v) => setState(() {
              phoneNumber = v;
            }),
            style: TextStyle(
              color: phoneNumberColor,
              fontSize: phoneNumberFontSize,
              fontWeight: phoneNumberFontWeight,
            ),
            // phoneNumberColor
            keyboardType: TextInputType.phone,
            decoration:  InputDecoration(
                suffixIcon: phoneCleanIcon,
                counterText:'',
                border: InputBorder.none,
                hintText: "请输入手机号码",
                hintStyle: const TextStyle(color: Colors.grey)
            ),
          ),
        )
      ],
    ),
  );

  Widget? get phoneCleanIcon => (phoneNumber!=null && phoneNumber!.isNotEmpty)
      ? InkWell(
    onTap: (){
      setState(() {
        phoneNumber = "";
        _phoneTextEditingController.clear();
      });
    },
    child: const Icon(Icons.clear_outlined, size: 14,),
  )
      : null;

  /// 账号输入框
  Widget get accountTextField => SizedBox(
    height: 60,
    child: Row(
      children: [
        const Text("账号"),
        const SizedBox(width: 16,),
        Expanded(
            child: TextFormField(
              inputFormatters: [
                FilteringTextInputFormatter.allow(RegExp("[0-9]{0,6}"))
              ],
              maxLength: 6,
              validator: (v){
                if (v ==null ||  v.length != 6 ){
                  return "账号的长度6位";
                }
                return null;
              },
              keyboardType: TextInputType.number,
              maxLines: 1,
            )
        )
      ],
    ),
  );

  /// 密码输入框
  Widget get passwordTextField => SizedBox(
    height: 60,
    child: Row(
      children: [
        const Text("密码"),
        const SizedBox(width: 16,),
        Expanded(
            child: TextFormField(
              obscureText: true,
              maxLength: 12,
              validator: (v){
                if (v == null || v.length < 8 ) {
                  return "密码长度最少8位";
                }
                // RegExp passwordExp = RegExp(r"[A-Z]+[a-z]+[0-9]+");
                if (!RegExp(r"[A-Z]").hasMatch(v) ||
                    !RegExp(r"[a-z]").hasMatch(v) ||
                    !RegExp(r"[0-9]").hasMatch(v)){
                  return "密码必须包含大小写字母和数字";
                }
                return null;
              },
            )
        )
      ],
    ),
  );

  /// 国家手机号前缀
  // void phoneCountryType(){
  //   showBottomSheet(context: context, builder: (BuildContext context){
  //     return Container(
  //
  //     );
  //   });
  // }

}


